<template>
  <!-- 新闻详情 -->
  <div class="newsDetailPc">
    <div class="box">
      <div class="title">{{ data?.name }}</div>
      <div class="date">
        发布时间：{{ data?.release_time }} &nbsp; &nbsp; 浏览量：{{
          data?.hit
        }}&nbsp; &nbsp;<span v-if="data?.source"
          >新闻来源:{{ data?.source }}</span
        >
      </div>
      <div class="line"></div>
      <div class="content">
        <div v-html="data?.contentweb"></div>
      </div>
      <div class="line"></div>
      <div class="footer">
        <div class="left">
          <div
            class="prev"
            v-if="prevNext?.previous"
            @click="prevNextClick(prevNext?.previous)"
          >
            上一篇：{{ prevNext?.previous.name }}
          </div>
          <div
            class="next"
            v-if="prevNext?.next"
            @click="prevNextClick(prevNext?.next)"
          >
            下一篇：{{ prevNext?.next.name }}
          </div>
        </div>
        <div class="back" @click="toList">返回列表</div>
      </div>
    </div>
  </div>
  <!-- 移动端 -->
  <div class="newsDetailMobile">
    <div class="box">
      <div class="title">{{ data?.name }}</div>
      <div class="date">
        发布时间：{{ data?.release_time }} &nbsp; &nbsp; 浏览量：{{ data?.hit }}
      </div>
      <div class="line"></div>
      <div class="content">
        <div v-html="data?.contentweb"></div>
      </div>
      <div class="line"></div>
      <div class="footer">
        <div class="left">
          <div
            class="prev"
            v-if="prevNext?.previous"
            @click="prevNextClick(prevNext?.previous)"
          >
            上一篇：{{ prevNext?.previous.name }}
          </div>
          <div
            class="next"
            v-if="prevNext?.next"
            @click="prevNextClick(prevNext?.next)"
          >
            下一篇：{{ prevNext?.next.name }}
          </div>
        </div>
        <div class="back" @click="toList">返回列表</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      data: null,
      prevNext: null,
    };
  },
  computed: {
    ...mapState("common", ["webInfo"]),
    ...mapGetters("common", ["getNavInfo"]),
  },
  watch: {
    $route(newData) {
      if (newData.query.id) {
        this.getData(newData.query.id);
      }
    },
  },
  mounted() {
    this.getData(this.$route.query.id);
  },
  methods: {
    toList() {
      this.$router.push({
        name: "investorsNotice",
        query: {
          id: 14,
        },
      });
    },
    /**
     * 优先url站外链接 次之pdf 次之详情
     * @param {*} e
     */
    prevNextClick(e) {
      if (e.url) {
        window.open(e.url);
      } else if (e.videofile) {
        window.open(e.videofile, "_blank");
      } else {
        this.$router.push({
          name: this.$router.currentRoute.value.name,
          query: {
            id: e.id,
          },
        });
      }
    },
    /**
     * 获取列表数据
     */
    async getData(id) {
      try {
        const result = await this.$request.get("/khcommon/singlePage", {
          params: {
            id: id,
          },
        });
        //上下篇
        const prevNext = await this.$request.get("/khcommon/previousNext", {
          params: {
            id: id,
          },
        });
        this.prevNext = prevNext.data;
        this.data = result.data;
        document.title = `${this.webInfo?.webname}_${this.data?.category_name}`;

        this.$emit("change", 1);
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .newsDetailMobile {
    display: none;
  }

  .newsDetailPc {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;

    // background: #f8f8f8;
    .content {
      width: 800px;
      box-sizing: border-box;
      // padding: 0 20px;
    }

    .box {
      overflow: hidden;
      border-radius: 10px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #ffffff;

      .title {
        width: 100%;
        padding: 0 30px;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        font-size: 32px;

        font-weight: 500;
        color: #333333;
        line-height: 40px;
      }

      .date {
        margin-top: 40px;
        font-size: 16px;

        font-weight: 400;
        color: #999999;
        line-height: 29px;
      }

      .line {
        margin: 34px 0;
        width: 800px;
        height: 1px;
        background: #eeeeee;
      }

      .footer {
        margin-top: 20px;
        width: 800px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 73px;

        .left {
          height: 80px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 16px;

          font-weight: 400;
          color: #666666;

          .prev {
            @include fn.ellipsis();
            width: 640px;
            cursor: pointer;
            font-size: 16px;

            font-weight: 400;
            color: #666666;
            line-height: 54px;
          }

          .next {
            width: 640px;
            @include fn.ellipsis();
            cursor: pointer;
            font-size: 16px;

            font-weight: 400;
            color: #666666;
            line-height: 54px;
          }
        }

        .back {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 138px;
          height: 40px;
          background: color.$base;
          color: #fff;
          border-radius: 20px;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .newsDetailPc {
    display: none;
  }

  .newsDetailMobile {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;

    // background: #f8f8f8;
    .content {
      box-sizing: border-box;
      padding: 0 fn.rpx(20);
    }

    .box {
      overflow: hidden;
      border-radius: fn.rpx(10);
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #ffffff;

      .title {
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 fn.rpx(30);
        width: 100%;
        margin-top: fn.rpx(30);
        font-size: fn.rpx(32);

        font-weight: 500;
        color: #333333;
        line-height: fn.rpx(29);
      }

      .date {
        margin-top: fn.rpx(40);
        font-size: fn.rpx(16);

        font-weight: 400;
        color: #999999;
        line-height: fn.rpx(29);
      }

      .line {
        margin-top: fn.rpx(34);
        width: fn.rpx(630);
        height: 1px;
        background: #eeeeee;
      }

      .footer {
        margin-top: fn.rpx(20);
        width: fn.rpx(700);
        display: flex;
        align-items: center;
        flex-direction: column;
        height: fn.rpx(140);

        .left {
          margin-left: fn.rpx(30);
          height: fn.rpx(73);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: fn.rpx(20);

          font-weight: 400;
          color: #666666;

          .prev {
            @include fn.ellipsis(1);
            cursor: pointer;
            font-size: fn.rpx(16);

            font-weight: 400;
            color: #666666;
            // line-height: fn.rpx(54);
          }

          .next {
            @include fn.ellipsis(1);
            cursor: pointer;
            font-size: fn.rpx(16);
            width: fn.rpx(600);
            font-weight: 400;
            color: #666666;
            // line-height: fn.rpx(55);
          }
        }

        .back {
          margin-top: fn.rpx(20);
          margin-bottom: fn.rpx(20);
          cursor: pointer;
          display: flex;
          font-size: fn.rpx(16);
          justify-content: center;
          align-items: center;
          width: fn.rpx(138);
          height: fn.rpx(40);
          background: color.$base;
          color: #fff;
          border-radius: fn.rpx(20);
        }
      }
    }
  }
}
</style>